<template>
	<view class="all">
		<view class="top">
			<uni-icons class="fanhui" color=white type="arrowleft" size="25" @click="back"></uni-icons>
			<view class="biaoti1">请选择你感兴趣的内容</view>
			<view class="biaoti2">我们将根据你的选择为你推荐内容</view>
		</view>
		<view class="neirong">
			<text class="biaoti3">舞台剧</text>
			<text class="xuhao">(2/3)</text>
			<view class="daxuanzekuang">
				<view class="xuanzekuang">
					<view class="thing1">
					<button :class="{weixuanze1:xingquxuanze2form.geju==='0',xuanze1:xingquxuanze2form.geju==='1'}" :plain="true" @click="choose1"></button>
					<image :src="require('../../static/logo.jpg')" class="img">
					<view class="xiaobiaoti2">歌剧</view>
					<view :class="{mengban:xingquxuanze2form.geju==='1'}"></view>
					</view>
					<view class="thing2">
					<button :class="{weixuanze2:xingquxuanze2form.wuju==='0',xuanze2:xingquxuanze2form.wuju==='1'}" :plain="true" @click="choose2"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti2">舞剧</view>
					<view :class="{mengban:xingquxuanze2form.wuju==='1'}"></view>
					</view>
					<view class="thing3">
					<button :class="{weixuanze3:xingquxuanze2form.huaju==='0',xuanze3:xingquxuanze2form.huaju==='1'}" :plain="true" @click="choose3"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti2">话剧</view>
					<view :class="{mengban:xingquxuanze2form.huaju==='1'}"></view>
					</view>
				</view>
				<view class="xuanzekuang">
					<view class="thing4">
					<button :class="{weixuanze4:xingquxuanze2form.oufaju==='0',xuanze4:xingquxuanze2form.oufaju==='1'}" :plain="true" @click="choose4"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti1">偶发剧</view>
					<view :class="{mengban:xingquxuanze2form.oufaju==='1'}"></view>
					</view>
					<view class="thing5">
					<button :class="{weixuanze5:xingquxuanze2form.muouju==='0',xuanze5:xingquxuanze2form.muouju==='1'}" :plain="true" @click="choose5"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti1">木偶剧</view>
					<view :class="{mengban:xingquxuanze2form.muouju==='1'}"></view>
					</view>
					<view class="thing6">
					<button :class="{weixuanze6:xingquxuanze2form.yaju==='0',xuanze6:xingquxuanze2form.yaju==='1'}" :plain="true" @click="choose6"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti2">哑剧</view>
					<view :class="{mengban:xingquxuanze2form.yaju==='1'}"></view>
					</view>
				</view>
				<view class="xuanzekuang">
					<view class="thing7">
					<button :class="{weixuanze7:xingquxuanze2form.shiju==='0',xuanze7:xingquxuanze2form.shiju==='1'}" :plain="true" @click="choose7"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti2">诗剧</view>
					<view :class="{mengban:xingquxuanze2form.shiju==='1'}"></view>
					</view>
					<view class="thing8">
					<button :class="{weixuanze8:xingquxuanze2form.jingju==='0',xuanze8:xingquxuanze2form.jingju==='1'}" :plain="true" @click="choose8"></button>
					<image :src="require('../../static/logo.jpg')" class="img">	
					<view class="xiaobiaoti2">京剧</view>
					<view :class="{mengban:xingquxuanze2form.jingju==='1'}"></view>
					</view>
				</view>
			</view>
			<button class="back" @click="shangyibu">上一步</button>
			<button class="next" @click="xiayibu">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xingquxuanze2form: {
					geju:"0",
					wuju:"0",
					huaju:"0",
					oufaju:"0",
					muouju:"0",
					yaju:"0",
					shiju:"0",
					jingju:"0",
				}
			}
		},
		methods: {
			xiayibu() {
				uni.setStorageSync('canshu2',this.xingquxuanze2form);
				uni.navigateTo({
					url: './xingquxuanze3'
				})
			},
			back() {
				uni.navigateBack({})
			},
			shangyibu()
			{
				uni.navigateBack({})
			},
			choose1() {
				if(this.xingquxuanze2form.geju==="0")
				{
				this.xingquxuanze2form.geju="1";
				console.log(this.canshu);
				}
				else if(this.xingquxuanze2form.geju==="1")
				{
				this.xingquxuanze2form.geju="0";
				}
			},
			choose2() {
				if(this.xingquxuanze2form.wuju==="0")
				{
				this.xingquxuanze2form.wuju="1";
				}
				else if(this.xingquxuanze2form.wuju==="1")
				{
				this.xingquxuanze2form.wuju="0";
				}
			},
			choose3() {
				if(this.xingquxuanze2form.huaju==="0")
				{
				this.xingquxuanze2form.huaju="1";
				}
				else if(this.xingquxuanze2form.huaju==="1")
				{
				this.xingquxuanze2form.huaju="0";
				}
			},
			choose4() {
				if(this.xingquxuanze2form.oufaju==="0")
				{
				this.xingquxuanze2form.oufaju="1";
				}
				else if(this.xingquxuanze2form.oufaju==="1")
				{
				this.xingquxuanze2form.oufaju="0";
				}
			},
			choose5() {
				if(this.xingquxuanze2form.muouju==="0")
				{
				this.xingquxuanze2form.muouju="1";
				}
				else if(this.xingquxuanze2form.muouju==="1")
				{
				this.xingquxuanze2form.muouju="0";
				}
			},
			choose6() {
				if(this.xingquxuanze2form.yaju==="0")
				{
				this.xingquxuanze2form.yaju="1";
				}
				else if(this.xingquxuanze2form.yaju==="1")
				{
				this.xingquxuanze2form.yaju="0";
				}
			},
			choose7() {
				if(this.xingquxuanze2form.shiju==="0")
				{
				this.xingquxuanze2form.shiju="1";
				}
				else if(this.xingquxuanze2form.shiju==="1")
				{
				this.xingquxuanze2form.shiju="0";
				}
			},
			choose8() {
				if(this.xingquxuanze2form.jingju==="0")
				{
				this.xingquxuanze2form.jingju="1";
				}
				else if(this.xingquxuanze2form.jingju==="1")
				{
				this.xingquxuanze2form.jingju="0";
				}
			}
		},
	}
</script>

<style scoped>
	.top {
		width: 100vw;
		height: 20vh;
		background-color: #B1E3FF;
		border-radius: 20rpx;
		position: relative;
	}

	.fanhui {
		position: relative;
		top: 40rpx;
		left: 20rpx;
	}

	.biaoti1 {
		font-size: 60rpx;
		color: white;
		font-weight: bold;
		position: relative;
		left: 80rpx;
		top: 70rpx
	}

	.biaoti2 {
		font-size: 30rpx;
		color: #797979;
		position: relative;
		left: 150rpx;
		top: 100rpx
	}

	.neirong {
		width: 100vw;
		height: 80vh;
	}

	.biaoti3 {
		font-size: 55rpx;
		color: black;
		font-weight: bold;
		position: relative;
		left: 260rpx;
		top: 30rpx;
	}

	.xuhao {
		font-size: 45rpx;
		color: #797979;
		position: relative;
		left: 270rpx;
		top: 26rpx;
	}
	.daxuanzekuang {
		width: 100vw;
		height: 66vh;
		position: relative;
		top: 3vh;
	}
	
	.xuanzekuang {
		width: 100vw;
		height: 21vh;
		position: relative;
		top: 0vh;
	}
	.thing1
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 0vw;
	}
	.img
	{
		width: 230rpx;
		height: 230rpx;
		border-radius: 50%;
		position: relative;
		left:10rpx;
		top:5rpx;
	}
	.mengban
	{
		width: 233rpx;
		height: 233rpx;
		background-color: rgba(215,215,215,0.5);
		border-radius: 50%;
		position: relative;
		left:9.5rpx;
		top:-279.5rpx;
	}
	.xiaobiaoti1
	{
		font-size: 35rpx;
		position: relative;
		top:20rpx;
		left:75rpx;
	}
	.xiaobiaoti2
	{
		font-size: 35rpx;
		position: relative;
		top:20rpx;
		left:95rpx;
	}
	.weixuanze1 {
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #AAAAAA;
		border-radius: 50%;
		padding: 0;
		position: relative;
		left:-90rpx;
		top:10rpx;
	}
	.xuanze1 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		left:-90rpx;
		top:10rpx;
	}
	.thing2
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 33vw;
		top:-21vh;
	}
	.weixuanze2 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #AAAAAA;
		padding: 0;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.xuanze2 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.thing3
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 66vw;
		top:-42vh;
	}
	.weixuanze3 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #AAAAAA;
		padding: 0;
		position: relative;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}

	.xuanze3 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.thing4
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 0vw;
	}
	.weixuanze4 {
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #AAAAAA;
		border-radius: 50%;
		padding: 0;
		position: relative;
		left:-90rpx;
		top:10rpx;
	}
	.xuanze4 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		left:-90rpx;
		top:10rpx;
	}
	.thing5
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 33vw;
		top:-21vh;
	}
	.weixuanze5 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #AAAAAA;
		padding: 0;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.xuanze5 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.thing6
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 66vw;
		top:-42vh;
	}
	.weixuanze6 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #AAAAAA;
		padding: 0;
		position: relative;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	
	.xuanze6 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.thing7
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 0vw;
	}
	.weixuanze7 {
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #AAAAAA;
		border-radius: 50%;
		padding: 0;
		position: relative;
		left:-90rpx;
		top:10rpx;
	}
	.xuanze7 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		left:-90rpx;
		top:10rpx;
	}
	.thing8
	{
		width: 33vw;
		height: 21vh;
		position: relative;
		left: 33vw;
		top:-21vh;
	}
	.weixuanze8 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #AAAAAA;
		padding: 0;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.xuanze8 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #20B0FF;
		border: 0rpx solid #ffffff;
		padding: 0;
		position: relative;
		left: -10vw;
		top: 10rpx;
	}
	.back {
		width: 40vw;
		height: 5vh;
		font-size: 22px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		background-color: #B1E3FF;
		left:-180rpx;
		top:45rpx;
	}
	.next {
		width: 40vw;
		height: 5vh;
		font-size: 22px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		background-color: #20b0ff;
		left:180rpx;
		top:-2.3vh;
	}
</style>
